import React, { useEffect, useState } from 'react'
import ReactEcharts from 'echarts-for-react';
import axios from '../../aixos'

export default function Home() {

  const [data, setData] = useState([])
  const [collectionData, setCollectionData] = useState([])

  const getPieOption = ()=> {
    let option = {
      title: {
        text: '文章分类占比',
        // subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          // name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: data,
          itemStyle:{ 
            label:{ 
                  label:{ 
                    show: true, 
                    formatter: '{b} : {c} ({d}%)' 
                  }, 
                  labelLine :{show:true} 
                } 
            },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
   return option
  }

  const getBarOption = () => {
    let option = {
      xAxis: {
        type: 'category',
        data: data.map(item => item.name)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: data.map(item => item.value),
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    }
   return option
  }

  const getPieCollectionOption = () => {
    let option = {
      title: {
        text: '百宝箱分类占比',
        // subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          // name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: collectionData,
          itemStyle:{ 
            label:{ 
                  label:{ 
                    show: true, 
                    formatter: '{b} : {c} ({d}%)' 
                  }, 
                  labelLine :{show:true} 
                } 
            },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    return option
  }
  /* const getBarCollectionOption = () => {
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: collectionData.map(item => item.name),
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: collectionData.map(item => item.value)
        }
      ]
    }
    return option
  }*/

  useEffect(() => {
    axios.get('/echarts/article').then(res => {
      setData(res.data)
    })
  }, [])
  useEffect(() => {
    axios.get('/echarts/collection').then(res => {
      setCollectionData(res.data)
    })
  }, [])

  return (
    <div className='home'>
      <h2 style={{textAlign: 'center', fontWeight: 'bold', marginBottom: '20px'}}>文章数据统计</h2>
      <div style={{display: 'flex'}}>
        <ReactEcharts option={getPieOption()} theme="Imooc"  style={{height:'380px', width: '50%'}}/>
        <ReactEcharts option={getBarOption()} theme="Imooc"  style={{height:'380px', width: '50%'}}/>
        {/* <img src='/upload/165314732287903.jpg' alt='图片飞走了' /> */}
      </div>
      {/* <h2 style={{textAlign: 'center', fontWeight: 'bold', marginBottom: '20px'}}>百宝箱数据统计</h2> */}
      <div style={{display: 'flex', justifyContent: 'center'}}>
        <ReactEcharts option={getPieCollectionOption()} theme="Imooc"  style={{height:'380px', width: '50%'}}/>
        {/* <ReactEcharts option={getBarCollectionOption()} theme="Imooc"  style={{height:'380px', width: '50%'}}/> */}
      </div>
    </div>
  )
}
